<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <link type="text/css" rel="stylesheet" href="/css/banner.css" />

    <!-- 轮播图 -->
    <van-swipe class="aui-m-slider" :autoplay="3000" indicator-color="blue">
        <van-swipe-item>
            <van-image width="100%" :height="380" fit="cover" :src="product.thumbs_text" />
        </van-swipe-item>
    </van-swipe>

    <div class="detailbox">
        <h4>{{ product.name }}</h4>
        <div class="price">
            <template v-if="product.price">
                立即购买：<em>￥</em>{{ product.price }}
            </template>
            <template v-if="product.buy">
                |
                拼团买：<em>￥</em>{{ product.buy }}
            </template>
            <!-- <b class="font">库存500件</b> -->
        </div>
    </div>

    <div class="allkbox"></div>

    <div class="info_choice">
        <!-- Sku 商品规格 -->
        <div class="commodity" @click="SkuShow = true">
            <div class="opt">
                <div class="title wanl-gray">
                    选择
                </div>
                <div class="option">
                    <div class="selected">
                        <div>
                            <span>尺寸</span>
                            <span>颜色</span>
                        </div>
                    </div>
                    <div class="option-list">
                        <div>
                            <!-- <div class="cu-tag">
                                <span>155/80A/S</span>
                            </div>
                            <div class="cu-tag">
                                <span>160/84A/M1</span>
                            </div>
                            <div class="cu-tag">
                                <span>65/88A/L</span>
                            </div> -->
                            <div class="cu-tag">
                                <span>更多规格可选</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wanl-gray">
                <img src="/images/go.png" />
            </div>
        </div>
        <!-- 服务 -->
        <div class="commodity" @click="TipShow = true">
            <div class="opt">
                <div class="title wanl-gray">
                    服务
                </div>
                <div class="option">
                    <div class="selected">
                        <div>
                            <span>7天无理由退款</span>
                            <span>·</span>
                            <span>24小时内发货</span>
                            <span>·</span>
                            <span>假一赔十</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wanl-gray">
                <img src="/images/go.png" />
            </div>
        </div>
    </div>

    <div class="allkbox"></div>

    <!-- 选项卡 -->
    <van-tabs class="detailbox_2" v-model:active="active" type="card" color="#EE0A24">
        <van-tab title="产品参数">
            <div class="rate">
                <ul>
                    <li>品牌: 水星被里</li>
                    <li>材质: 棉棉</li>
                    <li>种类: 棉</li>
                    <li>风格: 田园</li>
                    <li>成分含量: 100%</li>
                    <li>图案: 植物花卉</li>
                    <li>件数: 4件</li>
                    <li>产品等级: 合格品</li>
                    <li>床品工艺: 其他</li>
                    <li>面料支数: 40支</li>
                    <li>面料密度: .</li>
                    <li>货号: AY590404AY590804</li>
                    <li>织造工艺: 斜纹</li>
                    <li>款式: 床单式 床笠式</li>
                    <li>适用人群: 大众</li>
                    <li>被面材质: 棉</li>
                    <li>适用床尺寸: 1.2m（4英尺）床 1.5m（5英尺）床 1.8m（6英尺）床</li>
                    <li>颜色分类: 莎莉亚(床笠款) 莎莉亚(床单款) 安逸若兮(鸟蛋绿/床单款) 安逸若兮(鸟蛋绿/床笠款) 繁花梦语(婴儿蓝/床笠款) 繁花梦语(婴儿蓝/床单款) 【100%全棉 原创设计】
                        【清新优雅】
                        【手感柔软】
                        【原创设计】 花西雅(床单款) 花西雅(床笠款)</li>
                </ul>
                <img src="/images/02.jpg" />
                <img src="/images/04.jpg" />
                <img src="/images/05.jpg" />
            </div>
        </van-tab>
        <van-tab title="商品评价">
            <div class="rate">
                <div class="rate-header">
                    <div class="rate-score">
                        <h4>与描述相符</h4>
                        <strong>4.5</strong>
                    </div>
                    <div class="rate-graph">
                        <van-rate v-model="rate" readonly allow-half />
                    </div>
                </div>
                <div class="rate-content">
                    <div v-if="comment">
                        <div class="review-box" v-for="(item, key) in comment" :key="key">
                            <div class="review-item">
                                <div class="from-whom">
                                    <div class="avatar">
                                        <img :src="item.business.avatar_text" alt="" />
                                    </div>
                                    <div class="name">{{ item.business.nickname ?? '暂无昵称' }}</div>
                                </div>
                                <div class="review-details">
                                    <div class="content">{{ item.comment }}</div>
                                    <div>
                                        <img :src="item.thumbs_text" alt="">
                                    </div>
                                    <div class="time">{{ item.comtime_text }}</div>
                                    <van-rate v-model="item.rate" readonly />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else>
                        <div class="rate-empty">该商品还没有人写评价呢</div>
                    </div>
                </div>
            </div>
        </van-tab>
    </van-tabs>

    <!-- 商品规格插件组 -->
    <van-sku ref="SkuRef" v-model="SkuShow" :sku="sku" :properties="properties" :goods="goods" :goods-id="product.id"
        @add-cart="onAddCartClicked" @buy-clicked="onBuyClicked">
        <!-- 自定义 sku actions -->
        <template #sku-actions="props">
            <div class="van-sku-actions">
                <van-button square size="large" type="warning" color="#FF9500"
                    @click="props.skuEventBus.emit('sku:addCart')">
                    加入购物车
                </van-button>
                <van-button square size="large" type="danger" color="#ff0036a8" @click="JoinTeam">
                    拼团买
                </van-button>
                <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
                <van-button square size="large" type="danger" color="#FF0036"
                    @click="props.skuEventBus.emit('sku:buy')">
                    立即购买
                </van-button>
            </div>
        </template>
    </van-sku>

    <!-- 协议条款 -->
    <van-action-sheet v-model:show="TipShow" title="协议条款">
        <div class="ProductTip">
            1、保护用户个人信息是一项基本原则，我们将会采取合理的措施保护用户的个人信息。除法律法规规定的情形外，未经用户许可我们不会向第三方公开、透漏个人信息。APP对相关信息采用专业加密存储与传输方式，保障用户个人信息安全，如果您选择同意使用APP软件，即表示您认可并接受APP服务条款及其可能随时更新的内容。<br>
            2、我们将会使用您的以下功能：麦克风、喇叭、WIFI网络、蜂窝通信网络、手机基站数据、SD卡、短信控制、通话权限、蓝牙管理，如果您禁止APP使用以上相关服务和功能，您将自行承担不能获得或享用APP相应服务的后果。<br>
            3、为了提供更好的客户服务，基于技术必要性收集一些有关设备级别事件（例如崩溃）的信息，但这些信息并不能够让我们识别您的身份。为了能够让APP定位服务更精确，可能会收集并处理有关您实际所在位置信息（例如移动设备发送的GPS信号），WI-FI接入点和基站位置信息。我们将对上述信息实施技术保护措施，以最大程度保护这些信息不被第三方非法获得，同时，您可以自行选择拒绝我们基于技术必要性收集的这些信息，并自行承担不能获得或享用APP相应服务的后果。<br>
            4、在您使用我们的产品或服务的过程中，我们可能：需要您提供个人信息，如姓名、电子邮件地址、电话号码、联系地址等以及注册或申请服务时需要的其它类似个人信息；您对我们的产品和服务使用即表明您同意我们对这些信息的收集和合理使用。您可以自行选择拒绝、放弃使用相关产品或服务。<br>
            5、由于您的自身行为或不可抗力等情形，导致上述可能涉及您隐私或您认为是私人信息的内容发生被泄露、批漏，或被第三方获取、使用、转让等情形的，均由您自行承担不利后果，我们对此不承担任何责任。<br>
            6、我们拥有对上述条款的最终解释权。<br>
        </div>
    </van-action-sheet>

    <div class="h54"></div>

    <!-- 购物栏 -->
    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon icon="cart-o" :badge="product.cart" text="购物车" @click="ToCart" v-if="product.cart" />
        <van-action-bar-icon icon="cart-o" text="购物车" @click="ToCart" v-else />
        <van-action-bar-icon icon="star" color="#ff5000" text="已收藏" @click="collection" v-if="product.collection" />
        <van-action-bar-icon icon="star-o" text="收藏" @click="collection" v-else />
        <!-- <van-action-bar-button color="#FF9500" type="warning" text="加入购物车" /> -->
        <!-- <van-action-bar-button color="#ff0036a8" type="danger" text="拼团买" /> -->
        <van-action-bar-button type="danger" text="立即购买" @click="SkuShow = true" />
    </van-action-bar>

    <!-- 拼团信息 -->
    <div class="teamwork">
        <img src="/images/teamwork.jpg" alt="" />
    </div>

    <!-- 分享面板 -->
    <div class="share">
        <img src="/images/share.png" alt="" />
    </div>
</template>

<script setup>
import { getCurrentInstance, onBeforeMount, ref } from 'vue';
import VanSku from 'vant-sku'
import 'vant-sku/dist/index.css'

const { proxy } = getCurrentInstance()

// 商品id
let proid = proxy.$route.query.pid ?? 0
let product = ref({})
let comment = ref([])

//拼团ID
let teamid = proxy.$cookies.get('teamid') ? proxy.$cookies.get('teamid') : 0;

// 评论
let active = ref(0)
let rate = ref(4.5)

// Sku信息结构
let SkuShow = ref(false)
let sku = ref({})
let properties = ref([])
let goods = ref({})
let SkuRef = ref({})

// 条款服务
let TipShow = ref(false)

// 生命周期
onBeforeMount(() => {
    info()
})

// 获取商品信息
const info = async () => {
    var params = { proid }

    // 判断是否有没有登录
    if (proxy.$business.value.id) {
        params.busid = proxy.$business.value.id
    }

    var result = await proxy.$POST({
        url: '/product/info',
        params
    })

    if (result.code == 0) {
        proxy.$fail({
            message: result.msg,
            duration: 1000,
            onclick: () => proxy.$router.go(-1)
        })
        return false
    }

    let ProductData = result.data.product
    let CommentData = result.data.comment
    let SkuData = result.data.sku
    let PropData = result.data.properties

    // 星级评分 需要给数值类型
    CommentData.map(item => item.rate = parseInt(item.rate))

    product.value = ProductData
    comment.value = CommentData
    goods.value = { picture: ProductData.thumbs_text }
    sku.value = SkuData
    properties.value = Object.values(PropData)
}

// 添加收藏
const collection = async () => {
    // 判断是否有登录
    if (!proxy.$business.value.id) {
        proxy.$fail('请先登录')
        return false
    }

    // 发起请求
    var result = await proxy.$POST({
        url: '/product/collection',
        params: {
            busid: proxy.$business.value.id,
            collectid: proid
        }
    })

    if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
    }

    product.value.collection = result.data == 'add' ? true : false
}

// 添加购物车
const onAddCartClicked = async (SkuData) => {
    //判断是否有登录
    if (!proxy.$business.value.id) {
        proxy.$fail('请先登录')
        return false
    }

    //判断是否有选择规格
    if (properties.value.length > 0 && !SkuData.selectedSkuComb) {
        proxy.$fail('请选择商品规格')
        return false
    }

    //购买数量
    var selectedNum = SkuData.selectedNum

    if (selectedNum <= 0) {
        proxy.$fail('购买数量不能小于等于0')
        return false
    }

    var relationids = []

    //有规格
    if (properties.value.length > 0) {
        var SkuProps = SkuData.selectedSkuComb.properties

        for (var item of SkuProps) {
            var id = item.v[0] ? item.v[0]['id'] : 0;
            if (id) relationids.push(id)
        }
    }

    //组装数据
    var params = {
        busid: proxy.$business.value.id,
        proid: proid,
        nums: selectedNum,
        relationids: relationids.join(','), //规格id
    }

    //发送请求
    var result = await proxy.$POST({
        url: '/cart/add',
        params
    })

    //隐藏弹出框
    SkuShow.value = false

    if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
    }

    proxy.$success(result.msg)

    //更新购物车数量
    product.value.cart = result.data
}

// 跳转购物车
const ToCart = () => proxy.$router.push('/cart/index')

// 单独购买
const onBuyClicked = async (SkuData) => {
    console.log(SkuData)
}

// 拼团买
const JoinTeam = async () => {
    // 没有参与具体的拼团活动
    if (!teamid) {
        proxy.$router.push({ path: '/team/index', query: { pid: product.value.id } })
        return false
    }

    var SkuData = SkuRef.value.getSkuData()


    //判断是否有登录
    if (!proxy.$business.value.id) {
        proxy.$fail('请先登录')
        return false
    }

    //判断是否有选择规格
    if (properties.value.length > 0 && !SkuData.selectedSkuComb) {
        proxy.$fail('请选择商品规格')
        return false
    }

    var relationids = []

    //有规格
    if (properties.value.length > 0) {
        var SkuProps = SkuData.selectedSkuComb.properties

        for (var item of SkuProps) {
            var id = item.v[0] ? item.v[0]['id'] : 0;
            if (id) relationids.push(id)
        }
    }

    //规格ID 记录到cookie中
    // relationids:relationids.join(','), //规格id
    proxy.$cookies.set('relationids', relationids)

    //隐藏弹出框
    SkuShow.value = false

    proxy.$router.push({ path: '/team/confirm', query: { pid: product.value.id } })

}

</script>